﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋转时钟</title>

<style>
* {
	font-family:'Righteous',cursive;
}
body {
	background-color:#112;
}
.spinner {
	position:absolute;
	border-radius:100%;
	overflow:hidden;
}
.num {
	display:block;
	position:absolute;
	width:100%;
	line-height:110%;
}
/*Hours*/

#spinner_h1 .num_1 {
	transform:rotate( 120deg );
}
#spinner_h1 .num_2 {
	transform:rotate( 240deg );
}
#spinner_h2 .num_1 {
	transform:rotate( 36deg );
}
#spinner_h2 .num_2 {
	transform:rotate( 72deg );
}
#spinner_h2 .num_3 {
	transform:rotate( 108deg );
}
#spinner_h2 .num_4 {
	transform:rotate( 144deg );
}
#spinner_h2 .num_5 {
	transform:rotate( 180deg );
}
#spinner_h2 .num_6 {
	transform:rotate( 216deg );
}
#spinner_h2 .num_7 {
	transform:rotate( 252deg );
}
#spinner_h2 .num_8 {
	transform:rotate( 288deg );
}
#spinner_h2 .num_9 {
	transform:rotate( 324deg );
}
/*Minutes*/

#spinner_m1 .num_1 {
	transform:rotate( 60deg );
}
#spinner_m1 .num_2 {
	transform:rotate( 120deg );
}
#spinner_m1 .num_3 {
	transform:rotate( 180deg );
}
#spinner_m1 .num_4 {
	transform:rotate( 240deg );
}
#spinner_m1 .num_5 {
	transform:rotate( 300deg );
}
#spinner_m2 .num_1 {
	transform:rotate( 36deg );
}
#spinner_m2 .num_2 {
	transform:rotate( 72deg );
}
#spinner_m2 .num_3 {
	transform:rotate( 108deg );
}
#spinner_m2 .num_4 {
	transform:rotate( 144deg );
}
#spinner_m2 .num_5 {
	transform:rotate( 180deg );
}
#spinner_m2 .num_6 {
	transform:rotate( 216deg );
}
#spinner_m2 .num_7 {
	transform:rotate( 252deg );
}
#spinner_m2 .num_8 {
	transform:rotate( 288deg );
}
#spinner_m2 .num_9 {
	transform:rotate( 324deg );
}
/*Seconds*/

#spinner_s1 .num_1 {
	transform:rotate( 60deg );
}
#spinner_s1 .num_2 {
	transform:rotate( 120deg );
}
#spinner_s1 .num_3 {
	transform:rotate( 180deg );
}
#spinner_s1 .num_4 {
	transform:rotate( 240deg );
}
#spinner_s1 .num_5 {
	transform:rotate( 300deg );
}
#spinner_s2 .num_1 {
	transform:rotate( 36deg );
}
#spinner_s2 .num_2 {
	transform:rotate( 72deg );
}
#spinner_s2 .num_3 {
	transform:rotate( 108deg );
}
#spinner_s2 .num_4 {
	transform:rotate( 144deg );
}
#spinner_s2 .num_5 {
	transform:rotate( 180deg );
}
#spinner_s2 .num_6 {
	transform:rotate( 216deg );
}
#spinner_s2 .num_7 {
	transform:rotate( 252deg );
}
#spinner_s2 .num_8 {
	transform:rotate( 288deg );
}
#spinner_s2 .num_9 {
	transform:rotate( 324deg );
}
/*Hours/Minutes/Seconds*/


/*Size*/:root {
	--base:6vmin;
}
/*CSS variables.Needs a CSS preprocessor to work on older browsers*/

body {
	padding:0;
	margin:0;
}
.container {
	overflow:hidden;
	position:relative;
	width:calc(var(--base) * 14);
	height:calc(var(--base) * 14);
	top:calc(50% - (var(--base) * 7));
	margin-left:auto;
	margin-right:auto;
}
#spinner_s2 {
	top:calc(var(--base) * 0);
	left:calc(var(--base) * 0);
}
#spinner_s1 {
	top:calc(var(--base) * 1);
	left:calc(var(--base) * 1);
}
#spinner_m2 {
	top:calc(var(--base) * 2);
	left:calc(var(--base) * 2);
}
#spinner_m1 {
	top:calc(var(--base) * 3);
	left:calc(var(--base) * 3);
}
#spinner_h2 {
	top:calc(var(--base) * 4);
	left:calc(var(--base) * 4);
}
#spinner_h1 {
	top:calc(var(--base) * 5);
	left:calc(var(--base) * 5);
}
#spinner_s2 {
	width:calc(var(--base) * 14);
	height:calc(var(--base) * 14);
}
#spinner_s1 {
	width:calc(var(--base) * 12);
	height:calc(var(--base) * 12);
}
#spinner_m2 {
	width:calc(var(--base) * 10);
	height:calc(var(--base) * 10);
}
#spinner_m1 {
	width:calc(var(--base) * 8);
	height:calc(var(--base) * 8);
}
#spinner_h2 {
	width:calc(var(--base) * 6);
	height:calc(var(--base) * 6);
}
#spinner_h1 {
	width:calc(var(--base) * 4);
	height:calc(var(--base) * 4);
}
.num {
	font-size:var(--base);
}
#spinner_h1 .num,#spinner_h2 .num,#spinner_m1 .num,#spinner_m2 .num,#spinner_s1 .num,#spinner_s2 .num {
	top:50%;
	height:var(--base);
	margin-top:calc(var(--base)/-2);
}
/*.num div {
	padding-left:calc(var(--base)/7);
}
*/

.num div {
	float:right;
	padding:0;
	width:calc(var(--base)/1.1);
	text-align:center;
	color:darkgoldenrod;
}
.top {
	position:absolute;
	display:block;
	box-sizing:border-box;
	top:calc(var(--base) * 6);
	left:calc(var(--base) * 6);
	width:calc(var(--base) * 2);
	height:calc(var(--base) * 2);
	padding-left:calc(var(--base)/3);
	text-align:center;
	line-height:165%;
	font-size:var(--base);
	border:calc(var(--base)/10) solid GoldenRod;
	border-radius:100%;
	overflow:hidden;
	color:ivory;
}
.spinner {
	border:calc(var(--base)/10) solid GoldenRod;
	box-sizing:border-box;
}
#spinner_s1,#spinner_m1,#spinner_h1 {
	border:calc(var(--base)/15) solid rgba(218,165,32,0.3);
}
/*Transitions !*/

/*Hours*/
.spinner_h1_0 {
	transform:rotate( 360deg );
}
.spinner_h1_1 {
	transform:rotate( 240deg );
}
.spinner_h1_2 {
	transform:rotate( 120deg );
}
.spinner_h1_switch {
	transform:rotate( 480deg );
	transition:none !important;
}
.spinner_h2_0 {
	transform:rotate( 360deg );
}
.spinner_h2_1 {
	transform:rotate( 324deg );
}
.spinner_h2_2 {
	transform:rotate( 288deg );
}
.spinner_h2_3 {
	transform:rotate( 252deg );
}
.spinner_h2_4 {
	transform:rotate( 216deg );
}
.spinner_h2_5 {
	transform:rotate( 180deg );
}
.spinner_h2_6 {
	transform:rotate( 144deg );
}
.spinner_h2_7 {
	transform:rotate( 108deg );
}
.spinner_h2_8 {
	transform:rotate( 72deg );
}
.spinner_h2_9 {
	transform:rotate( 36deg );
}
.spinner_h2_switch {
	transform:rotate( 396deg );
	transition:none !important;
}
/*Minutes*/
.spinner_m1_0 {
	transform:rotate( 360deg );
}
.spinner_m1_1 {
	transform:rotate( 300deg );
}
.spinner_m1_2 {
	transform:rotate( 240deg );
}
.spinner_m1_3 {
	transform:rotate( 180deg );
}
.spinner_m1_4 {
	transform:rotate( 120deg );
}
.spinner_m1_5 {
	transform:rotate( 60deg );
}
.spinner_m1_switch {
	transform:rotate( 420deg );
	transition:none !important;
}
.spinner_m2_0 {
	transform:rotate( 360deg );
}
.spinner_m2_1 {
	transform:rotate( 324deg );
}
.spinner_m2_2 {
	transform:rotate( 288deg );
}
.spinner_m2_3 {
	transform:rotate( 252deg );
}
.spinner_m2_4 {
	transform:rotate( 216deg );
}
.spinner_m2_5 {
	transform:rotate( 180deg );
}
.spinner_m2_6 {
	transform:rotate( 144deg );
}
.spinner_m2_7 {
	transform:rotate( 108deg );
}
.spinner_m2_8 {
	transform:rotate( 72deg );
}
.spinner_m2_9 {
	transform:rotate( 36deg );
}
.spinner_m2_switch {
	transform:rotate( 396deg );
	transition:none !important;
}
/*Seconds*/ 
.spinner_s1_0 {
	transform:rotate( 360deg );
}
.spinner_s1_1 {
	transform:rotate( 300deg );
}
.spinner_s1_2 {
	transform:rotate( 240deg );
}
.spinner_s1_3 {
	transform:rotate( 180deg );
}
.spinner_s1_4 {
	transform:rotate( 120deg );
}
.spinner_s1_5 {
	transform:rotate( 60deg );
}
.spinner_s1_switch {
	transform:rotate( 420deg );
	transition:none !important;
}
.spinner_s2_0 {
	transform:rotate( 360deg );
}
.spinner_s2_1 {
	transform:rotate( 324deg );
}
.spinner_s2_2 {
	transform:rotate( 288deg );
}
.spinner_s2_3 {
	transform:rotate( 252deg );
}
.spinner_s2_4 {
	transform:rotate( 216deg );
}
.spinner_s2_5 {
	transform:rotate( 180deg );
}
.spinner_s2_6 {
	transform:rotate( 144deg );
}
.spinner_s2_7 {
	transform:rotate( 108deg );
}
.spinner_s2_8 {
	transform:rotate( 72deg );
}
.spinner_s2_9 {
	transform:rotate( 36deg );
}
.spinner_s2_switch {
	transform:rotate( 396deg );
	transition:none !important;
}
.num div {
	transition:transform 500ms ease-out,color 500ms ease-out;
	,font-size 500ms ease-out;
}
.lit div {
	color:ivory;
	font-size:calc(var(--base)*1.3);
	transition:transform 500ms ease-out,color 500ms ease-out,font-size 500ms ease-out;
}
.spinner {
	transition:transform 500ms ease-in;
}
/*This fixes a bug on chrome*/
* {
	-webkit-backface-visibility:hidden;
	-webkit-transform:translateZ(0) scale(1.0,1.0);
}
html,body {
	height:100%;
}
</style>
</head>
<body>
  <div class="container">

    <!-- Hours -->

    <div class="spinner" id="spinner_h1">
      <div class="num num_0" id="num_0_h1">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_h1">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_h1">
        <div>2</div>
      </div>
    </div>

    <div class="spinner" id="spinner_h2">
      <div class="num num_0" id="num_0_h2">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_h2">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_h2">
        <div>2</div>
      </div>
      <div class="num num_3" id="num_3_h2">
        <div>3</div>
      </div>
      <div class="num num_4" id="num_4_h2">
        <div>4</div>
      </div>
      <div class="num num_5" id="num_5_h2">
        <div>5</div>
      </div>
      <div class="num num_6" id="num_6_h2">
        <div>6</div>
      </div>
      <div class="num num_7" id="num_7_h2">
        <div>7</div>
      </div>
      <div class="num num_8" id="num_8_h2">
        <div>8</div>
      </div>
      <div class="num num_9" id="num_9_h2">
        <div>9</div>
      </div>
    </div>

    <!-- Minutes -->

    <div class="spinner" id="spinner_m1">
      <div class="num num_0" id="num_0_m1">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_m1">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_m1">
        <div>2</div>
      </div>
      <div class="num num_3" id="num_3_m1">
        <div>3</div>
      </div>
      <div class="num num_4" id="num_4_m1">
        <div>4</div>
      </div>
      <div class="num num_5" id="num_5_m1">
        <div>5</div>
      </div>
    </div>

    <div class="spinner" id="spinner_m2">
      <div class="num num_0" id="num_0_m2">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_m2">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_m2">
        <div>2</div>
      </div>
      <div class="num num_3" id="num_3_m2">
        <div>3</div>
      </div>
      <div class="num num_4" id="num_4_m2">
        <div>4</div>
      </div>
      <div class="num num_5" id="num_5_m2">
        <div>5</div>
      </div>
      <div class="num num_6" id="num_6_m2">
        <div>6</div>
      </div>
      <div class="num num_7" id="num_7_m2">
        <div>7</div>
      </div>
      <div class="num num_8" id="num_8_m2">
        <div>8</div>
      </div>
      <div class="num num_9" id="num_9_m2">
        <div>9</div>
      </div>
    </div>

    <!-- Seconds -->

    <div class="spinner" id="spinner_s1">
      <div class="num num_0" id="num_0_s1">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_s1">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_s1">
        <div>2</div>
      </div>
      <div class="num num_3" id="num_3_s1">
        <div>3</div>
      </div>
      <div class="num num_4" id="num_4_s1">
        <div>4</div>
      </div>
      <div class="num num_5" id="num_5_s1">
        <div>5</div>
      </div>
    </div>

    <div class="spinner" id="spinner_s2">
      <div class="num num_0" id="num_0_s2">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_s2">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_s2">
        <div>2</div>
      </div>
      <div class="num num_3" id="num_3_s2">
        <div>3</div>
      </div>
      <div class="num num_4" id="num_4_s2">
        <div>4</div>
      </div>
      <div class="num num_5" id="num_5_s2">
        <div>5</div>
      </div>
      <div class="num num_6" id="num_6_s2">
        <div>6</div>
      </div>
      <div class="num num_7" id="num_7_s2">
        <div>7</div>
      </div>
      <div class="num num_8" id="num_8_s2">
        <div>8</div>
      </div>
      <div class="num num_9" id="num_9_s2">
        <div>9</div>
      </div>
    </div>

    <div class="top">></div>

  </div>
<script>
//These functions help add, remove or toggle css classes

function tog_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem == null) {
    return 0;
  }
  if (elem.classList.contains(cl) === true) {
    elem.classList.remove(cl);
  } else {
    elem.classList.add(cl);
  }
}

function add_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem == null) {
    return 0;
  }
  if (elem.classList.contains(cl) !== true) {
    elem.classList.add(cl);
  }
}

function rem_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem == null) {
    return 0;
  }
  if (elem.classList.contains(cl) === true) {
    elem.classList.remove(cl);
  }
}

//This function gets the date and does operations using H/M/S

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();

  var h1 = (h - h % 10) / 10;
  var h2 = h % 10;

  var m1 = (m - m % 10) / 10;
  var m2 = m % 10;

  var s1 = (s - s % 10) / 10;
  var s2 = s % 10;

  set_spin_class("s1", s1);
  set_spin_class("s2", s2);

  set_spin_class("m1", m1);
  set_spin_class("m2", m2);

  set_spin_class("h1", h1);
  set_spin_class("h2", h2);

  var t = setTimeout(startTime, 500);
}

//This function calls the appropriate class changes

// It receives the type of spinner to change (m1 for example) and changes classes based on the current time

function set_spin_class(target, val) {
  for (i = 0; i < 10; i++) {
    if (i != val) {
      rem_class("spinner_" + target, "spinner_" + target + "_" + i);
      rem_class("num_" + i + "_" + target, "lit");
    }
  }
  add_class("spinner_" + target, "spinner_" + target + "_" + val);
  add_class("num_" + val + "_" + target, "lit");

  if (val === 0) {
    deswitcher(target, val);
  } /*These functions prevent the clock from changing direction*/
  setTimeout(function() {
    switcher(target, val);
  }, 500);
}

function switcher(target, val) {
  switch ("spinner_" + target + "_" + val) {
    case "spinner_h1_2":
      rem_class("spinner_h1", "spinner_h1_2");
      add_class("spinner_h1", "spinner_h1_switch");
      break;
    case "spinner_h2_9":
      rem_class("spinner_h2", "spinner_h1_2");
      add_class("spinner_h2", "spinner_h2_switch");
      break;

    case "spinner_m1_5":
      rem_class("spinner_m1", "spinner_m1_5");
      add_class("spinner_m1", "spinner_m1_switch");
      break;
    case "spinner_m2_9":
      rem_class("spinner_m2", "spinner_m2_9");
      add_class("spinner_m2", "spinner_m2_switch");
      break;

    case "spinner_s1_5":
      rem_class("spinner_s1", "spinner_s1_5");
      add_class("spinner_s1", "spinner_s1_switch");
      break;
    case "spinner_s2_9":
      rem_class("spinner_s2", "spinner_s2_9");
      add_class("spinner_s2", "spinner_s2_switch");
      break;
  }
}
function deswitcher(target, val) {
  rem_class("spinner_" + target, "spinner_" + target + "_switch");
}

//Do stuff here

window.onload = function() {
  startTime();
};
</script>
</body>
</html>
